<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>平台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <style>
        .show_icon{
            font-size: 20px;
            color: #499ef8;
            font-weight: bold;
        }
        .province span{
            font-weight: bold;
            /*color:red !important;*/
            color:red !important;
        }
        .city span{
            width: 60px!important;
        }
        .display{
            cursor: pointer;
            font-size: 20px;
        }
    </style>
</head>
<body>

<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <div class="layui-tab layui-tab-brief" lay-filter="test">
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" style="margin-top: 20px">
                        <form class="layui-form" id="addressForm" lay-filter="role">
                            <div class="layui-col-md12">
                                <c:forEach items="${list}" var="l">
                                    <div class="layui-form-item">
                                        <div class="layui-col-sm1 layui-col-sm-offset1 province">
                                            <input class="main${l.id}" type="checkbox" data-type="1" data-id="${l.id}" name="proId"
                                                   id="checkbox-${l.id}" lay-skin="primary" title="${l.name}" ${l.checkFlag}>
                                            <i class="layui-icon layui-icon-triangle-r display" onclick="displayCity(this,${l.id})"></i>
                                        </div>
                                        <div class="layui-col-sm9 city" style="margin-left: 40px;">
                                            <c:forEach items="${l.cityList}" var="c">
                                                    <div class="citys${l.id}" style="display: none" a-show="1">
                                                        <input class="child${l.id}" data-parentId="${l.id}" data-id="${c.id}" type="checkbox" ${c.checkFlag}
                                                               name="cityId" lay-skin="primary" id="checkbox-${c.id}" title="${c.name}" data-type="2">
                                                    </div>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                            <hr>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-layout-admin">
                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0;">
                        <button class="layui-btn" onclick="saveAddress()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="modelId" value="${modelId}">
<script src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/plugins/image/previewImg.js"></script>
<script>
    layui.config({
        //静态资源所在路径
        base: '/layuiadmin/'
    }).extend({
        //主入口模块
        index: 'lib/index'
    }).use(['index', 'form'], function(){
        var $ = layui.$,layer = layui.layer,element = layui.element,form=layui.form;
        form.on('checkbox',function (data) {
            //得到checkbox原始DOM对象
            var dom = data.elem;
            //得到点击的类型,请看input上的data-type
            var type = $(dom).data('type');
            //获取被点击input的id,input上的data-id
            var id = $(dom).data('id');
            if(type===1){
                //data.elem.checked判断是否选中，true/false
                if(data.elem.checked){
                    $('.child'+id).prop('checked',true);
                }else{
                    $('.child'+id).prop('checked',false);
                }
            }else if(type===2){
                //选中某个城市的话省份也要选中
                var pid = $(dom).attr("data-parentId");
                if(data.elem.checked){
                    $('.main'+pid).prop('checked',true);
                }else{
                    if($("input[data-parentId="+pid+"]:checked").length==0){
                        $('.main'+pid).prop('checked',false);
                    }
                }
            }
            // 复选框操作后重新渲染form，否则元素无法正确显示
            form.render('checkbox');
        })
    });

    function saveAddress() {
        var jsonArr = new Array();
        $('input[name="proId"]:checked').each(function (e) {
            var proId = $(this).attr("data-id");
            var str = "";
            $('.child'+proId).each(function (e) {
                if($(this).is(":checked")){
                    str += $(this).attr("data-id") + "~";
                }
            });
            var exp = "";
            if(str.length > 0){
                // str = str.substr(0,str.length-1);
                exp = proId + "::" + str;
            }else{
                exp = proId;
            }
            jsonArr.push(exp);
        });
        // console.log(jsonArr);
        //父页面的模板ID位置
        var modelId = $("#modelId").val();
        //地址json数据回传到父页面
        parent.$("#"+modelId).text(jsonArr);
        //关闭弹出层
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    function displayCity(v,id) {
        var dom = $(".citys"+id);
        //1隐藏 0显示
        var isShow = dom.attr('a-show');
        if(isShow==1){
            dom.css("display","inline-block");
            dom.attr("a-show","0");
            $(v).removeClass("layui-icon-triangle-r");
            $(v).addClass("layui-icon-triangle-d");
        }else{
            dom.css("display","none");
            dom.attr("a-show","1");
            $(v).removeClass("layui-icon-triangle-d");
            $(v).addClass("layui-icon-triangle-r");
        }
    }
</script>
</body>
</html>